<div ng-controller="AppCtrl as ctrl" ng-cloak>
  <md-content layout="column">
    <p>
       Display 1000 item in a virtual-list with viewport of only 16 columns (width=50px).
       <br/><br/>
       This demo shows scroll and rendering performance gains when using <code>md-virtual-repeat</code>;
       achieved with the dynamic reuse of rows visible in the viewport area. Developers are required to
       explicitly use <code>md-virtual-repeat-container</code> as a wrapping parent container.
    </p>

    <md-virtual-repeat-container id="horizontal-container" md-orient-horizontal>
      <div md-virtual-repeat="item in ctrl.items"
          class="repeated-item" flex>
        {{item}}
      </div>
    </md-virtual-repeat-container>
  </md-content>

</div>
